<template>
  <div class="chat">
    <div v-if="!connected">
      <input v-model="username" placeholder="输入用户名" />
      <button @click="connect">进入聊天室</button>
    </div>

    <div v-else class="chat-box">
      <div class="sidebar">
        <h3>在线用户</h3>
        <ul>
          <li
              v-for="user in onlineUsers"
              :key="user"
              :class="{ active: user === toUser }"
              @click="selectUser(user)"
          >
            {{ user }}
          </li>
          <li
              :class="{ active: toUser === 'ALL' }"
              @click="selectUser('ALL')"
          >
            群聊
          </li>
        </ul>
      </div>

      <div class="main">
        <div class="messages">
          <div v-for="(msg, index) in messages" :key="index">
            <template v-if="msg.type === 'system'">
              <p class="system">{{ msg.content }}</p>
            </template>
            <template v-else>
              <p><strong>{{ msg.from }}：</strong>{{ msg.content }}</p>
            </template>
          </div>
        </div>
        <div class="input-area">
          <input v-model="message" placeholder="输入消息..." @keyup.enter="sendMessage" />
          <button @click="sendMessage">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const username = ref("");
const socket = ref(null);
const connected = ref(false);
const messages = ref([]);
const onlineUsers = ref([]);
const toUser = ref("ALL");
const message = ref("");

function connect() {
  socket.value = new WebSocket(`ws://localhost:8080/chat/${username.value}`);

  socket.value.onopen = () => {
    connected.value = true;
  };

  socket.value.onmessage = (event) => {
    const msg = JSON.parse(event.data);

    if (msg.type === "users") {
      onlineUsers.value = msg.users.filter(u => u !== username.value);
    } else {
      messages.value.push(msg);
    }
  };

  socket.value.onclose = () => {
    connected.value = false;
  };
}

function sendMessage() {
  if (!message.value.trim()) return;

  const msg = {
    from: username.value,
    to: toUser.value,
    content: message.value,
    type: "chat",
  };

  socket.value.send(JSON.stringify(msg));
  message.value = "";
}

function selectUser(user) {
  toUser.value = user;
}
</script>

<style>
.chat-box {
  display: flex;
  width: 800px;
  margin: 40px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.sidebar {
  width: 200px;
  background: #555555;
  border-radius: 8px;
  padding: 10px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 6px;
  cursor: pointer;
}

.sidebar li.active {
  background: #007bff;
  color: white;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.system {
  color: gray;
  text-align: center;
}

.input-area {
  display: flex;
  border-top: 1px solid #ccc;
}

.input-area input {
  flex: 1;
  padding: 8px;
}

.input-area button {
  width: 80px;
}
</style>
